<template>
  <div class="container">
     <Header></Header>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        @change="option1Change"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        @change="option2Change"
      />
    </van-dropdown-menu>
     <van-loading v-if="loading ==1" size="24px" vertical>加载中...</van-loading>
      <div v-else-if="loading ==0" class="list"  v-for="(item,index) in universityList" :key="index">
        <div class="item" @click="collegeInfo(item.id)">
          <div class="top">
            <div class="image"><img
                :src="getImgUrl(item.thumb)"
                class="jsx-3203890579"
              ></div>
            <div class="name">
              <div class="cn">{{item.title}}</div>
              <div class="en">{{item.sort_title}}</div>
            </div><i style="position: absolute;  right: 0;">></i>
          </div>
          <div v-html="item.content"></div>
        </div>
    </div>

    <div v-else-if="loading ==2" style="margin-top:2rem;text-align:center">没有数据</div>
  </div>
</template>

<script>
  import {getCountry,getUniversity} from './../../../../service/index.js'
import Header from './../../../../components/header/Header'
  export default {
  name: "MoreUniversity",
  components: {
    Header
  },
  data() {
    return {
      value1: 1,
      value2: "1",
      optionOne:null,
      optionTwo:null,
      option1: [],
      option2: [],
      universityList:[],
      type:1,
      country:1,
      loading:1,
    };
  },
    created() {
      getCountry().then((res)=>{
        this.optionOne = res.data.country;
        this.optionOne.map((val)=>{
          let obj = {};
          obj.text = val.title;
          obj.value = val.id;
          this.option1.push(obj)
        });
        this.optionTwo = res.data.type;
        for(let key in this.optionTwo){
            let obj = {};
            obj.text = this.optionTwo[key];
            obj.value = key;
            this.option2.push(obj);
        }
      }).catch(err=>{
        console.log(err);
      });
      this.getUniversityData()
    },
    methods:{
    collegeInfo(id){
      this.$router.push({path:'/CollegeItemIntru', query:{id:id}})
    },
    option2Change(e){
      this.type = null;
      this.type = e;
      console.log(this.type);
      this.getUniversityData()
    },
    getUniversityData(){
      this.loading = 1;
      getUniversity({country:this.country,type:this.type}).then((res)=>{
        console.log(res);
        this.universityList = [];
        this.universityList = res.data.university_list

        if(this.universityList.length <= 0){
           setTimeout(() => {
             this.loading = 2;
           }, 1);
        }
      }).catch(err=>{
        console.log(err);
      }).finally(()=>{
         this.loading = 0;
      })
    },
    option1Change(e){
        this.country = null;
        this.country = e;
        console.log(this.country);
        this.getUniversityData()
      },
    
  },

};
</script>

<style lang="less" >
.container {

  .etc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.item{
    margin: 0.3rem 0.4rem;
    background: rgb(255, 255, 255);
    padding: 0.6rem 0.6rem 0.9rem;
    border-radius: 0.25rem;
}
.top{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  position: relative;
}
.image{
    overflow: hidden;
    width: 3.1rem;
    height: 3.1rem;
    margin: 0.35rem 0.35rem 0.35rem 0px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
}
.item.top.image{
    max-height: 2.75rem;
    max-width: 2.75rem;
    flex-shrink: 0;
}
.item.top.name{
    -webkit-box-flex: 99;
    flex-grow: 99;
}

.item.top.name.cn, .item.top.name.en{
    font-weight: bold;
}
.cn{
    color: rgb(42, 65, 84);
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.en{
    color: rgb(0, 164, 255);
    font-size: 0.5rem;
    max-width: 9.65rem;
}
.top.icon{
    font-size: 0.9rem;
    flex-shrink: 0;
    padding: 0.8rem 0.5rem;
}
.theme-color {
    color: #00a4ff !important;
}
.icon-arrow:before {
    content: "\e601";
}

}
</style>
